﻿<!doctype html>
<html lang="en">

<head>
	<title>Home</title>
	{%include file="public/head_common" /%}
	<!-- Pager CSS -->
<link rel="stylesheet" href="__STATIC__/assets/css/plug.css">
<link rel="stylesheet" href="__ROOT__/assets/addons/shopro/libs/element/element.css">
<link rel="stylesheet" href="__ROOT__/assets/addons/shopro/libs/common.css">
<script src="__STATIC__/components/vue-select.js"></script>
<style type="text/css">
	table label{
		font-weight: bold;
		/*padding-right: 20px;*/
	}
	table span{
		margin-right:50px;
	}
	.pop{
		position: absolute;
		width: 300px;
		padding: 8px;
		background: #eee;
		box-shadow: 5px 5px 5px #888888;
		display: none;
	}
	.pop ul{
		list-style: none;
		overflow: hidden;
		padding: 0px;
	}
	.pop ul li{
		float: left;
		padding: 5px;
	}
	.pop ul li:hover{
		cursor: pointer;
		color: #00aaff
	}

	.table > tbody > tr > td{
		border-top:0px;
	}
	.table > tbody + tbody {
    	border-top: 1px solid #ddd;
	}
	.green{
		color: green;
		font-weight: bold;
	}
	.red{
		color: red;
		font-weight: bold;
	}
</style>
</head>
<body>
	<div id="app" class="main">
		<!-- MAIN CONTENT -->
		<div class="main-content">
			<ul class="breadcrumb">
			    <li>财务管理</li>
			    <li>现金报表</li>
			</ul>
			<div class="container-fluid">
				<div class="row" style="margin-bottom: 10px;">
					<form class="form-inline">
					提交日期：<input type="text" class="form-control" size="6" name="date1" onclick="WdatePicker()">
						- <input type="text" class="form-control" size="6" name="date2" onclick="WdatePicker()">
					销售：
					<!-- <input type="text" class="form-control" size="6" v-model="search.saler"> -->
					<vue-select 
						placeholder=""
						v-model="search.saler"
						url="{%:url('Account/getSalers')%}"
						style="display: inline-block;width: 100px;">
					</vue-select>
					客户：<input type="text" class="form-control" size="6" v-model="search.cust">
					团队：<select v-model="organizationId" class="form-control" placeholder="请选择">
						<option
						v-for="item in organizationData"
						:key="item.id"
						:label="item.name"
						:value="item.id">
						</option>
						<option
						label="无团队"
						value="no_organization">
						</option>
						<option
						label="不选择"
						:value="null">
						</option>
					</select>
					分类：<select class="form-control" v-model="goods_categories_type">
						<option value=""> 不选择 </option>
						<option v-for="item in base.types" :value="item.val"> {{ item.name }} </option>
					</select>
					<button type="button" class="btn btn-primary search" @click="getList()">查询</button>
					<button type="button" class="btn btn-primary search" @click="exportExcel()">导出数据</button>
				</form>
				</div>
				<!-- 合计 -->
				<div style="margin: 10px 0;">
					<el-table ref="multipleTable" :data="totalList" tooltip-effect="dark" style="width: 100%" border
					> 
						<el-table-column label="类型" min-width="100" align="center">
							<template slot-scope="scope">
								<div >
									{{scope.row.name}}
								</div>
							</template>
						</el-table-column>
						<el-table-column label="总和" min-width="100">
							<template slot-scope="scope">
								<div >
									{{scope.row.all}}
								</div>
							</template>
						</el-table-column>
						<el-table-column label="售后" min-width="120" align="center">
							<template slot-scope="scope">
								<div >
									{{scope.row.refund}}
								</div>
							</template>
						</el-table-column>
						<el-table-column label="合计" min-width="120" align="center">
							<template slot-scope="scope">
								<div >
									{{scope.row.total}}
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<!-- 数据开始-->
				<div class="row" id="result">
					<table class="table table-hover table-condensed">
						<thead>
							<tr>
								<th>#</th>
								<th>订单号</th>
								<th>销售</th>
								<th>报单员</th>
								<th>接单日期</th>
								<th>支付方式</th>
								<th>提交时间</th>
								<th>客户</th>
								<th>电话</th>
								<th>地址</th>
								<th>商品名称</th>
								<th>颜色</th>
								<th>尺码</th>
								<th>数量</th>
								<th>工厂价</th>
								<th v-if="organization.length == 0">运费</th>
								<th>报单次数</th>
								<th>售价</th>
								<th>运费/包装</th>
								<th>档口</th>
								<th>发货时间</th>
								<th>物流公司</th>
								<th>物流单号</th>
								<th>备注</th>
								<th>状态</th>
							</tr>
						</thead>
						<tbody>
							
							<tr v-for="row in rows">
								<td>{{ row.id }}</td>
								<td>{{ row.order_no }}</td>
								<td>{{ row.acct_name }}</td>
								<td>{{ row.purchase_name }}</td>
								<td>{{ row.recv_day }}</td>
								<td>{{ row.pay_type }}</td>
								<td>{{ row.add_time }}</td>
								<td>{{ row.cust }}</td>
								<td>{{ row.phone }}</td>
								<td>{{ row.area_path }}</td>
								<td>{{ row.goods_info.name }}</td>
								<td>{{ row.color }}</td>
								<td>{{ row.spec }}</td>
								<td>{{ row.qty }}</td>
								<td>{{ row.purchase_price }}</td>
								<td v-if="organization.length == 0">{{ row.factory_price }}</td>
								<td :class="{red: row.purchase_times>1}">{{ row.purchase_times }}</td>
								<td>{{ row.price }}</td>
								<td>{{ row.pack_price }}</td>
								<td>{{ row.stall_name }}</td>
								<td>{{ row.exp_time }}</td>
								<td>{{ row.exp_name }}</td>
								<td>{{ row.exp_no }}</td>
								<td>{{ row.remarks }}</td>
								<td>{{ row.progress_txt }}</td>
							</tr>
						</tbody>
					</table>
					<div>
						<div>
							每页
							<select v-model="page_size" @change="getList(1)">
								<option value="10">10</option>
								<option value="20">20</option>
								<option value="50">50</option>
								<option value="100">100</option>
								<option value="200">200</option>
							</select> 条
						</div>
						<vue-pager :total_page='total_page' :cur_page='cur_page' @do-page='getList'></vue-pager>
					</div>
				</div>
				<!-- 数据结束-->				
			</div>
		</div>
		<!-- END MAIN CONTENT -->
	</div>
<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
<script src="__STATIC__/assets/vendor/vue.js" type="text/javascript"></script>
<script src="__ROOT__/assets/addons/shopro/libs/element/element.js"></script>
<script src="__STATIC__/assets/scripts/vue-pager.js" type="text/javascript"></script>
<script src="__STATIC__/assets/vendor/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
		
	var vm = new Vue({
		el: '#app',
		components: {
				'vue-select': vueSelect,
			},
		data: {
			totalList:[],
			page_size: 20,
			rows: [],
			organization:[],
			total_page: 0,
			cur_page: 1,
			search: {
				saler: '',
				cust:''
			},
			organizationData:[],//组织
			organizationId:null,//团队id
			goods_categories_type:'',//商品分类
			base: {
					types: [
						{val: 1,name:'衣服'},
						{val: 2,name:'下装'},
						{val: 3,name:'鞋'},
						{val: 4,name:'箱包'},
						{val: 5,name:'饰品'},
						{val: 6,name:'化妆品'},

						{val: 7,name:'皮具'},
						{val: 8,name:'男装'},
						{val: 9,name:'女装'},
						{val: 10,name:'男鞋'},
						{val: 11,name:'女鞋'},
						{val: 12,name:'珠宝'},
						{val: 13,name:'百货'},
					]
				},
		},
		created: function(){
			this.getList();
			this.getOrganization();
		},
		methods:{
			// 获取团队列表
			getOrganization(){
				let that = this;
				$.post("{%:url('organization/getlist')%}",{
				all:'all'
				},function(rsp){
					if(rsp.code == 1){
						that.organizationData = rsp.data;
					}
				},'json')
			},
			getList: function(page=1){
				var _this = this;
				var data = {};
				data['page'] = page;
				data['page_size'] = this.page_size;
				var search = this.search;
				var date1 = $("input[name='date1']").val();
				var date2 = $("input[name='date2']").val();
				if (date1 && date2) {
					search['date1'] = date1;
					search['date2'] = date2;
				}
				// 团队查询条件
				search['organization_id'] = this.organizationId;
				search['goods_categories_type'] = this.goods_categories_type;
				
				data.search = search;
				$.post("{%:url('Orders/getfinancelist')%}",data,function(rsp){
					 _this.rows = rsp.data.rows;
					 _this.organization = rsp.data.organization;
	                _this.total_page = rsp.data.total_page;
					_this.cur_page = Number(rsp.data.cur_page);
					_this.totalList = rsp.data.total_list;
				},'json')
			},
			// 导出数据
			exportExcel: function(){
				var _this = this;
				var search = this.search;
				var date1 = $("input[name='date1']").val();
				var date2 = $("input[name='date2']").val();
				let organizationId = this.organizationId||'';
				let excelUrl = "{%:url('Orders/exportExcle')%}"+'?page='
				+_this.cur_page+'&page_size='+this.page_size+
				'&organization_id='+organizationId+'&date1='
				+date1+'&date2='+date2+'&saler='+this.search.saler+'&cust='+this.search.cust;
				window.location.href = excelUrl;
			},
			
			
		}
	});
	
</script>
</body>
</html>